<template>
  <div id="app4">
    <NavBar />
    <div class="heroes-container">
      <el-row class="search-bar" :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="searchQuery"
            placeholder="搜索英雄人物..."
            prefix-icon="el-icon-search"
          />
        </el-col>
        <el-col :span="8">
          <el-select v-model="selectedRegion" placeholder="按地区筛选">
            <el-option
              v-for="region in regions"
              :key="region"
              :label="region"
              :value="region"
            />
          </el-select>
        </el-col>
      </el-row>
  
      <div class="heroes-list">
        <div 
          v-for="hero in filteredHeroes" 
          :key="hero.id" 
          class="hero-item"
        >
          <div class="hero-card">
            <img :src="hero.image" class="hero-image">
            <div class="hero-info">
              <h3>{{ hero.name }}</h3>
              <p class="hero-title">{{ hero.title }}</p>
              <p class="hero-description">{{ hero.description }}</p>
              <el-button type="primary" @click="showHeroDetail(hero)">
                查看详情
              </el-button>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 英雄详情对话框 -->
      <el-dialog
        v-model="dialogVisible"
        :title="selectedHero?.name"
        width="70%"
      >
        <div class="hero-detail">
          <div class="detail-header">
            <img :src="selectedHero?.image" class="detail-image">
            <div class="detail-basic-info">
              <h3>{{ selectedHero?.name }}</h3>
              <el-tag>{{ selectedHero?.region }}</el-tag>
              <p class="birth-death">{{ selectedHero?.birth }} - {{ selectedHero?.death }}</p>
            </div>
          </div>
          <el-tabs class="detail-tabs">
            <el-tab-pane label="生平简介">
              <p>{{ selectedHero?.description }}</p>
            </el-tab-pane>
            <el-tab-pane label="主要事迹">
              <el-timeline>
                <el-timeline-item
                  v-for="(deed, index) in selectedHero?.deeds"
                  :key="index"
                  :timestamp="deed.time"
                >
                  {{ deed.content }}
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
    </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import NavBar from '@/modules/module3/module3-kangri/components/NavBar.vue'
  const dialogVisible = ref(false)
  const selectedHero = ref(null)
  
  const searchQuery = ref('')
  const selectedRegion = ref('')
  const regions = ['东北', '华北', '华东', '华南', '西南', '西北']
  
  const heroes = [
    {
      id: 1,
      name: '赵一曼',
      title: '东北抗日女英雄', 
      region: '东北',
      birth: '1905',
      death: '1936',
      image: 'src/modules/module3/module3-kangri/assets/image/hero-zym.webp',
      description: '赵一曼（1905-1936），中国共产党党员，东北抗日联军女战士。',
      deeds: [
        { time: '1935年', content: '参加东北抗日联军' },
        { time: '1936年', content: '在与日军作战中身负重伤被捕' },
        { time: '1936年8月', content: '在狱中写下著名的《致儿子的一封信》' }
      ],
    },
    {
      id: 2,
      name: '杨靖宇',
      title: '抗日英雄',
      region: '东北',
      birth: '1905',
      death: '1940',
      image: 'src/modules/module3/module3-kangri/assets/image/hero-yjy.webp', 
      description: '杨靖宇（1905-1940），中国共产党员，抗日民族英雄，东北抗日联军创始人之一和主要领导人。',
      deeds: [
        { time: '1932年', content: '组建抗日游击队' },
        { time: '1934年', content: '任东北人民革命军第一军军长' },
        { time: '1940年2月', content: '在吉林濛江战斗中壮烈牺牲' }
      ],
    },
    {
      id: 3,
      name: '左权',
      title: '八路军高级将领',
      region: '华北',
      birth: '1905',
      death: '1942',
      image: 'src/modules/module3/module3-kangri/assets/image/hero-zq.webp',
      description: '左权（1905-1942），中国共产党员，八路军高级将领，为抗日战争胜利献出了宝贵的生命。',
      deeds: [
        { time: '1937年', content: '任八路军参谋长' },
        { time: '1940年', content: '指挥百团大战' },
        { time: '1942年5月', content: '在山西辽县麻田战斗中壮烈牺牲' }
      ],
    },
    {
      id: 4,
      name: '赵登禹',
      title: '国民革命军将领',
      region: '华北',
      birth: '1898',
      death: '1937',
      image: 'src/modules/module3/module3-kangri/assets/image/hero-zdy.webp',
      description: '赵登禹（1898-1937），国民革命军第二十九军少将旅长，在卢沟桥事变中英勇抗战，壮烈牺牲。',
      deeds: [
        { time: '1937年7月7日', content: '指挥部队抗击日军进攻' },
        { time: '1937年7月8日', content: '在宛平城与日军激战' },
        { time: '1937年7月28日', content: '在南口战役中壮烈牺牲' }
      ],
    },
    {
      id: 5,
      name: '戴安澜',
      title: '远征军将领',
      region: '华南',
      birth: '1904',
      death: '1942',
      image: 'src/modules/module3/module3-kangri/assets/image/hero-dal.webp',
      description: '戴安澜（1904-1942），中国远征军新编第200师师长，在缅甸战场英勇作战，为国捐躯。',
      deeds: [
        { time: '1942年3月', content: '率部参加中国远征军入缅作战' },
        { time: '1942年4月', content: '在同古保卫战中英勇作战' },
        { time: '1942年5月', content: '在缅甸同古阵地壮烈殉国' }
      ],
    },
    {
      id: 6,
      name: '张自忠',
      title: '国民革命军将领',
      region: '华中',
      birth: '1891',
      death: '1940',
      image: 'src/modules/module3/module3-kangri/assets/image/hero-zzz.jpg',
      description: '张自忠（1891-1940），国民革命军第三十三集团军总司令，在抗日战争中英勇献身。',
      deeds: [
        { time: '1937年', content: '参与淞沪会战' },
        { time: '1938年', content: '指挥武汉会战' },
        { time: '1940年5月16日', content: '在随枣会战中壮烈殉国' }
      ],
    },
    {
      id: 7,
      name: '佟麟阁',
      title: '国民革命军将领',
      region: '华北',
      birth: '1892',
      death: '1937',
      image: 'src/modules/module3/module3-kangri/assets/image/hero-tlg.webp',
      description: '佟麟阁（1892-1937），国民革命军第二十九军副军长，在平津战役中英勇抗战，壮烈牺牲。',
      deeds: [
        { time: '1937年7月', content: '参与卢沟桥抗战' },
        { time: '1937年7月28日', content: '指挥南口战役' },
        { time: '1937年7月29日', content: '在南口战役中壮烈牺牲' }
      ],
    }
  ]
  const filteredHeroes = computed(() => {
    return heroes.filter(hero => {
      const matchQuery = hero.name.includes(searchQuery.value) || 
                        hero.description.includes(searchQuery.value)
      const matchRegion = !selectedRegion.value || hero.region === selectedRegion.value
      return matchQuery && matchRegion
    })
  })
  
  const showHeroDetail = (hero) => {
    selectedHero.value = hero
    dialogVisible.value = true
  }
  </script>
  
  <style scoped>
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background-color: #f5f7fa;
}

#app4 {
  min-height: 100vh;
  width: 100%;
  min-height: 100vh;
  width: 100%;
  background-image: url('@/modules/module3/module3-kangri/assets/image/bg-global.jpg'); /* 替换为你的背景图片路径 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 使背景固定，不随滚动移动 */
}
  .heroes-container {
    padding: 20px;
  }
  
  .page-title {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .heroes-list {
    margin: 0 auto;
    padding: 20px;
    justify-items: center;
    width: 80%;
  }
  
  .hero-item {
    margin-bottom: 30px;
    width: 80%;
    justify-items: center;
  }
  
  .hero-card {
    display: flex;
    position: relative;
    height: 300px;
    width: 100%;
    transition: transform 0.5s ease;
    cursor: pointer;
  }
  .hero-name {
    height: auto;
    text-align: center;
    transform: translateX(200px);
    font-size: 24px;
  }
  
  .hero-image {
    width: 80%px;
    height: 300px;
    object-fit: cover;
    transform: translateX(200px);
    transition: transform 0.5s ease;
  }
  
  .hero-info {
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    opacity: 0;
    transform: translateX(-200px);
    transition: all 0.3s ease;
    flex: 1;
  }

  .hero-item:hover .hero-card {
    transform: translateX(-200px);
  }
  
  .hero-item:hover .hero-info {
    opacity: 1;
    transform: translateX(200px);
  }
  
  .hero-title {
    color: #666;
    margin: 10px 0;
  }
  
  .hero-description {
    font-size: 14px;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
  }
  
  .detail-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin-right: 20px;
  }
  
  .hero-detail {
    display: flex;
    padding: 20px;
  }
  
  .detail-content {
    flex: 1;
  }
  
  .search-bar {
    margin-bottom: 30px;
  }
  
  .detail-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
  }
  
  .detail-basic-info {
    margin: auto 20px;
  }
  
  .birth-death {
    color: #666;
    font-size: 14px;
  }
  
  .detail-tabs {
    margin-top: 20px;
  }
  </style>